<template>
  <div>
    <div id="bg">
      <el-card class="box-card">
        <h3>注册用户</h3>
        <el-input  
        prefix-icon="el-icon-user-solid" 
        placeholder="请输入用户"
         v-model="username" clearable>
        </el-input>
        <el-input
          prefix-icon="el-icon-s-goods" 
          placeholder="请输入密码"
          v-model="userpass"
          show-password>
          </el-input>
          <el-input  
        prefix-icon="el-icon-s-promotion" 
         v-model="mailbox"
        placeholder="请输入邮箱"
         clearable>
        </el-input>
        <el-button type="primary" @click="toregister">用户注册</el-button>
         <el-button type="primary" @click="login">返回登录</el-button>
        <p style="color:red;font-size:13px;height:15px;margin-top:5px">
          <span v-show="madIsNullOfTip">密码或用户名或邮箱不能为空</span>
        </p>
      </el-card>
    </div>
  </div>
</template>

<script>
// 把json变from
    import qs from 'qs'
export default {
  data() {
    return {
      username: "",
      userpass: "",
      mailbox: "",
      madIsNullOfTip: false,
    };
  },
  methods: {
    login(){
       this.$router.replace("/login");
    },
    toregister() {
      // 先执行else在执行if，madIsNullOfTip是判断输入的值是否正确，也可以用element ui的方法来限制
      if (this.username.length > 0 && this.userpass.length > 0) {
        this.madIsNullOfTip = false;
        this.$http({
          method: "post",
          url: "http://47.106.237.228:10002/user/register",
          headers: { "X-Requested-With": "XMLHttpRequest" },
          data: qs.stringify({
            username: this.username,
            password: this.userpass
          })
        })
          .then(res => {
             console.log(res);
            // console.log(res.data.state);
            // 判断请求返回的值是sucsess就成功
            if(res.data.issucceed == "0"){
              return  alert("账号重复，请重新输入账号");
            }
            else if (res.data.issucceed == "1") {
              alert("注册成功，请返回登录");
              console.log(res.data.issucceed, "注册成功");
              //alert("登录成功");
              // 组件通信把res.data的值放到store中去
              //this.$store.commit("loginStateChange", res.data);
              // 把loginState存到保存数据，类似于token，用来判断登录状态
              //sessionStorage.setItem("loginState", true);
              // sessionStorage.setItem("showUserName", res.data);
              // 登录成功跳转路由到首页
            }
            console.log(res);
            // alert(res);
          })
          .catch(err => {
            console.log(err);
          });

        console.log("login success");
      } else {
        this.madIsNullOfTip = true;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
#bg {
  height: 100vh;
  background: url("../../assets/img/login-page-bg.jpg");
  background-size: cover;

  padding-top: 100px;
  box-sizing: border-box;
}
.outherChoose {
  display: flex;
  justify-content: space-between;
  color: rgb(185, 184, 184);
  font-size: 12px;
  margin-bottom: 20px;
  span {
    cursor: pointer;
  }
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 400px;
  padding: 60px 70px;
  box-sizing: border-box;
  text-align: center;
  margin: auto;
  .el-input {
    margin: 10px 0 10px 0;
    box-sizing: border-box;
  }
}
.el-button {
  margin: 0 auto;
  width: 100px;
  margin-top: 5px;
  margin-left: 9px;
}
</style>
